const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    // 指定我们打包的入口文件
    entry: './src/index.js',

    // 输出的目录
    output: {
        // 输出的文件目录
        filename: 'bundle.js',
        // 输出的路径
        path: path.resolve(__dirname, './dist'),
        // 每一次打包都将上一次的删除，添加上一个可选参数
        clean: true,
        assetModuleFilename:'images/[contenthash][ext]'
    },
    // 开发模式
    mode: 'development',

    // 开发工具
    devtool:'inline-source-map',

    // 观察模式
    watch:true,

    plugins: [
        new HtmlWebpackPlugin({
            // 将哪个文件进行打包
            template: './index.html',
            // 输出的文件名称叫什么名字
            filename: 'app.html',
            // 将script标签注入哪里
            inject: 'body'
        })
    ],
    devServer:{
        // 当前我在该项目中下载了插件webpack-dev-server 他可以自己起一个服务器，我只是将dist目录作为了静态文件挂载在上面
        // 将当前的dist目录作为根目录
        static:'./dist',
        // open: true,
        // host: '127.0.0.1',
        // port: 80
    },
    module:{
        rules:[
            {
                test:/\.png$/,
                type:'asset/resource',
                generator:{
                    filename:'images/[contenthash][ext]'
                }
            },
            {
                test:/\.svg$/,
                type:'asset/inline'
            },
            {
                test:/\.txt$/,
                type:'asset/source'
            },
            {
                test:/\.jpg$/,
                type:'asset',
                parser:{
                    dataUrlCondition:{
                        // 大于4M就是资源文件
                        maxSize:4*1024*1024
                    }
                }
            }
        ]
    }
}


// 当我们的常量是大写字母开始的时候，证明他可能是一个对象或则是一个函数，我们需要实例化一下